HTML এর মাধ্যমে Open/Hide লিস্ট তৈরি করার নিয়ম

Welcome to Creationbangla-24. কেমন আছেন বন্ধুরা? আশা করি মহান আল্লাহ্ তা'য়ালার অশেষ রহমতে ভালো আছেন। আপনারা অবশ্যই Title দেখে বুঝতে পেরেছেন এই পেজে কী বিষয় নিয়ে আলোচনা করতে যাচ্ছি। তো আপনাদের জানিয়ে রাখি এটি একটি শিক্ষা বিষয়ক সাইট। এই site এ আমি নির্দিষ্ট কিছু বিষয় নিয়ে ধারাবাহিক ভাবে লিখব। আপনাদের একটি কথা না বললেই নয় যে, এই Page টি ভালোভাবে বুঝার জন্য এবং Page টি থেকে উপকৃত হওয়ার জন্য সম্পূর্ণ Page টি মনযোগ সহকারে পড়বেন। এখন এই পেজটিতে আপনাদের সাথে আলোচনা করতে যাচ্ছি "<details>" সম্পর্কে এবং আপনাদের সাথে আছি আমি Md.Aiub তো চলুন বন্ধুরা শুরু করা যাক।


details tag, open/hide list, drop down menu
ওয়েবপেজে কোনো বিষয়ে অতিরিক্ত তথ্য প্রদর্শন করার জন্য <details> ট্যাগ ব্যবহার করা হয়। তবে এই ট্যাগের সুবিধা হলো content গুলো স্বয়ংক্রিয়ভাবে close হয়ে থাকে। ব্যবহারকারি ইচ্ছা করলে open করে দেখতে পারে আবার চাইলে close করে রাখতে পারে। HTML Structure অনুযায়ী <details> ট্যাগের পর <summary> ট্যাগ ব্যবহার করতে হয়। <summary> ট্যাগের মাধ্যমে তথ্যগুলোকে <details> ট্যাগের সাথে সংযোক করা হয় এবং details element কে সংক্ষিপ্ত আকারে প্রদর্শনের জন্য <summary> ট্যাগ ব্যবহার করা হয়। এই Element যখন open করা হয় বা এর উপর click করা হয় তখন এটি প্রসারিত হয় এবং তথ্য প্রদর্শন করে। যে কোনো ধরণের content <details> ট্যাগের মাঝে ব্যবহার করা যায়।

<details> ও <summary> ট্যাগ এর গঠনরীতি: <details> ও <summary> ট্যাগ এর গঠনরীতি হলো <details>...Given your tag or text...</details>
<summary>...Given your tag or text...</summary>
তাছাড়া <details> ও <summary> ট্যাগে Global Attributes ও Event Attributes support করে।

নিম্নে Details Element এর জন্য কোডিং করে দেখানো হলো। আপনি চাইলে কোড বা টেক্স পরিবর্তন করে এখানেই অনুশীলন করতে পারেন এবং Run Code Button এ ক্লিক করে উপরের কোডগুলোর Output দেখতে পারেন । আবার আপনি চাইলে Copy Code Button এ ক্লিক করে কোডগুলো কপি করতে পারেন এবং তা আপনার প্রয়োজনে ব্যাবহার করতে পারেন।





Output
উপরিউক্ত Tag বিশ্লেষণ ও কাজের বর্ণনা :
  1. <!doctype html> এটাকে আসলে সম্পূর্ণ কোন Tag বলা হয় না। <!doctype html> ট্যাগ ব্যবহার করা হয় <html> ট্যাগ এর পূর্বে। যা ওয়েব ব্রাউজার কে html এর ভার্সন বলে দেয়। যাতে ওয়েব ব্রাউজার ওয়েব কন্টেন্ট গুলোর সাথে ভালো ভাবে কাজ করতে পারে। আর <!doctype html> ট্যাগ এর প্রধান কাজ হচ্ছে ওয়েব ব্রাউজার কে বলে দেওয়া যে, ওয়েব পেজটির Document type. HTML5 Standard.
  2. <html> ট্যাগ দ্বারা ওয়েব ব্রাউজারকে নির্দেশ করা হয়েছে যে, এই ওয়েব পেজটি HTML ভাষায় তৈরী।
  3. <head> ট্যাগ ওয়েবপেজ সম্পর্কিত তথ্য ধারণ করে। এখানে ওয়েবপেজের শিরোনাম রাখা হয়েছে <head> ট্যাগ এর মাঝে। তাছাড়াও <head> ট্যাগ এর মাঝেই আপনাকে Style sheet, Script, meta ট্যাগ ব্যবহার করতে হবে।
  4. <title> ট্যাগ ওয়েবপেজের শিরোনাম ধারণ করে। <title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শুরু করা হয়েছে এবং সম্পূর্ণ শিরোনামটি এই ট্যাগ এর মধ্যেই রাখতে হবে।
  5. </title> ট্যাগ এর মাধ্যমে ওয়েবপেজের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <title> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েবপেজের শিরোনাম বলে গণ্য হবে না।
  6. </head> ট্যাগ এর মাধ্যমে <head> বন্ধ করা হয়েছে।
  7. <body> ট্যাগ ওয়েবপজের মূল উপাদান ধারণ করে। আপনি ওয়েবপেজে যা প্রদর্শন করাতে চান সেই সম্পর্কিত সকল ট্যাগ <body> ট্যাগ এর মধ্যে রাখতে হবে।
  8. <h1> Tag দ্বারা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম নির্ধারণ করা হয়েছে।
  9. </h1> ট্যাগ এর মাধ্যমে ওয়েবপেজে আলোচিত বিষয়ের শিরোনাম শেষ করা হয়েছে। অর্থাৎ <h1> ট্যাগ বন্ধ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে সেটা ওয়েব পেজে আলোচিত বিষয়ের শিরোনাম বলে গণ্য হবে না।
  10. <details> Tag দ্বারা ওয়েবপেজে Cox's Bazar ও Sundarban সম্পর্কে অতিরিক্ত তথ্য ব্যবহার করা হয়েছে। যা open/close করা যায়।
  11. <summary> Tag দ্বারা তথ্যগুলোকে Details Element এর সাথে যুক্ত করা হয়েছে এবং সংক্ষিপ্ত আকারে প্রদর্শন করা হয়েছে।
  12. </summary> Tag এর মাধ্যমে <summary> ট্যাগ বন্ধ করা হয়েছে।
  13. <p> Tag দ্বারা ওয়েবপেজে একটি Paragraph ঘোষণা করা হয়েছে । আপনি প্যারাগ্রাফ হিসাবে যা লিখতে চান তা এই ট্যাগ এর মধ্যে রাখতে হবে। অন্যথায় প্যারাগ্রাফ হলে বিবেচিত হবে না।
  14. </p> Tag এর মাধ্যমে <p> ট্যাগ বন্ধ করা হয়েছে।
  15. </details> Tag এর মাধ্যমে <details> ট্যাগ বন্ধ করা হয়েছে।
  16. </body> Tag এর মাধ্যমে <body> ট্যাগ বন্ধ করা হয়েছে।
  17. </html> Tag Tag এর মাধ্যমে <html> ট্যাগ বন্ধ করা হয়েছে। অর্থাৎ Html ভাষায় তৈরিকৃত ওয়েজপেজটি শেষ করা হয়েছে। এই ট্যাগ এর বাইরে কিছু লিখলে তা Html ভাষায় তৈরিকৃত ওয়েজপেজটির কোনো Document বলে বিবেচিত হবে না।

ًপ্রিয় পাঠক বন্ধুরা,
আপনারা যদি এই পেজটি পড়ে উপকৃত হন তাহলে আমার পরিশ্রম স্বার্থক হবে। উপকৃত হয়ে থাকলে এই পেজটি আপনার বন্ধুদের মাঝে শেয়ার করতে ভুলবেন না। আপনার মতামত প্রকাশ করতে চাইলে কমেন্ট বক্সে কমেন্ট করতে পারেন। এতোক্ষণ ধর্য্যসহকারে Page টি পড়ার জন্য এবং আপনার মূল্যবান সময় আমাদের সাথে ব্যয় করার জন্য ধন্যবাদ। এর পরের Page এ আপনাদের সাথে "<dfn>" নিয়ে আলোচনা করবো, সেই সময় পর্যন্ত আমদের সাথে থাকার আমন্ত্রণ রইল। আপনাদের সকলে সুস্বাস্থ্য ও দীর্ঘায়ু কামনা করে আজকের মতো শেষ করছি,
আল্লাহ হফেজ...


Post a Comment

Previous Post Next Post